<template>
  <div class="Manage">
    <Header :zIndex="3" ref="Header"></Header>
    <div class="content-wrap">
      <center>
        <div class="top">
          <ul class="daohang_list">
              <li><router-link class="list_item" :to="{ path: '/Create' }">创建活动</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Manage' }">投票管理</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Level' }">账户升级</router-link></li>
              <li><router-link class="list_item on" :to="{ path: '/Userinfo' }">个人中心</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Invate' }">推荐有奖</router-link></li>
          </ul>
        </div>
        <div class="info_box">
            <div class="left">
                <div class="grzl">个人中心</div>
                <ul class="nav_child">
                  <li><router-link :to="{ path: '/Userinfo' }">个人信息</router-link></li>
                  <li><router-link :to="{path: '/Account'}">收款信息</router-link></li>
                  <li><router-link :to="{path: '/Address'}">收件地址</router-link></li>
                  <li><router-link :to="{path: '/Invoice'}">发票信息</router-link></li>
                  <li><router-link :to="{path: '/InvoiceRecord'}">发票管理</router-link></li>
                  <li><router-link class="on" :to="{path: '/DrawList'}">提现记录</router-link></li>
                  <li><router-link :to="{ path: '/Logs' }">消费记录</router-link></li>
                  <li><router-link :to="{ path: '/Editpass' }">修改密码</router-link></li>
                </ul>
            </div>
            <!-- 提现记录 -->
            <div class="iinforignt" style="padding-top: 10px;text-align:left;">
                <div style="padding:20px">
                    <el-form :inline="true">
                        <el-form-item label="日期：">
                            <el-date-picker v-model="dateRang" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="records">
                      <el-table-column label="申请时间" width="140">
                          <template slot-scope="scope">
                              {{formatDate(scope.row.addtime)}}
                          </template>
                      </el-table-column>
                      <el-table-column label="提现金额" width="110">
                          <template slot-scope="scope">
                              ￥{{(scope.row.amount/100).toFixed(2)}}元
                          </template>
                      </el-table-column>
                      <el-table-column label="手续费" width="70">
                          <template slot-scope="scope">
                              {{scope.row.rate}}%
                          </template>
                      </el-table-column>
                      <el-table-column label="实际付款金额" width="110">
                          <template slot-scope="scope">
                              ￥{{(scope.row.realAmount/100).toFixed(2)}}元
                          </template>
                      </el-table-column>
                      <el-table-column label="收款信息">
                          <template slot-scope="scope">
                            <p>收款人：{{scope.row.bankUser}}</p>
                            <p>收款银行：{{scope.row.bankName}}</p>
                            <p>收款账号：{{scope.row.bankNo}}</p>
                          </template>
                      </el-table-column>
                      <el-table-column label="付款时间" width="140">
                          <template slot-scope="scope">
                              {{scope.row.paytime> 0 ? formatDate(scope.row.paytime) : ''}}
                          </template>
                      </el-table-column>
                      <el-table-column label="状态" width="120">
                          <template slot-scope="scope">
                            <el-tag v-if="scope.row.state==0" effect="dark" type="info">未付款</el-tag>
                            <el-tag v-if="scope.row.state==1" effect="dark" type="success">已付款</el-tag>
                            <el-tag v-if="scope.row.state>1" effect="dark" type="danger">拒绝付款</el-tag>
                            <p v-if="scope.row.state>1">{{scope.row.reason}}</p>
                          </template>
                      </el-table-column>
                    </el-table>
                    <el-pagination :page-size="pageSize" :pager-count="11" layout="prev, pager, next" 
                        @current-change="setPage" :total="recordCount">
                    </el-pagination>
                </div>
            </div>
            <div class="clear"></div>
        </div>
      </center>
    </div>
    <Footer></Footer>
  </div>
</template>


<script>
import User from '../../utils/user'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
import Ajax from '../../utils/ajax'
export default {
  name: 'DrawCashLog',
  components: {
    Header,
    Footer
  },
  data () {
    return {
        records:[],
        page: 1,
        pageSize: 20,
        recordCount:0,
        dateRang:[],
        start: 0,
        end: 0
    }
  },
  created () {
    if(!User.getToken() || !User.getInfo()) {
      this.$router.replace('/Login');
      return;
    }
    this.setTitle('提现记录');
    this.loadData();
  },
  methods: {
      setPage(n){
          this.page = n;
          this.loadData();
      },
      search(){
          this.page = 1;
          if(this.dateRang && this.dateRang.length == 2) {
              if(this.dateRang[0] instanceof Date) {
                  this.start = parseInt(this.dateRang[0].getTime() / 1000);
              }
              if(this.dateRang[1] instanceof Date) {
                  this.end = parseInt(this.dateRang[1].getTime() / 1000);
              }
          }
          this.loadData();
      },
      loadData(){
          Ajax.get('member/drawcash/list', {
              page: this.page,
              size: this.pageSize,
              start: this.start,
              end: this.end
          }).then(res=>{
              if(res.code == 0){
                  this.records = res.data.data;
                  this.recordCount = res.data.recordCount;
              } else {
                  this.$alert(res.msg);
              }
          }).catch(err=>{
              console.error(err);
              this.$alert('获取数据失败');
          });
      }
  }
}
</script>
<style src="@/assets/css/manage.css"  scoped></style>
<style src="@/assets/css/userinfo.css"  scoped></style>
